{extend name="./app/admin/view/main.html" /}
{block name="title"}{$mipInfo['userModelName']}{if condition='$uid'}编辑{else/}发布{/if} - {__block__}{/block}

{block name="style"}
<style> 

</style>
{/block}

{block name="main"}
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">用户</h4>
        <h5 class="sub-title"><a :href="'{$mipInfo.domain}/{$Think.config.admin}/user/userList/groupcode-'+groupcode">{{groupcodeStr}}</a> <i class="ion-chevron-right"></i> {if condition='$uid'}编辑{else/}发布{/if}</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='publishPost'>
            <span><Icon type="checkmark-round"></Icon> 提交保存</span>
        </button>
    </div>
</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="">
        <section class="mip-box">
            <section class="mip-box-body">
                 <i-Form :label-width="120" class="m-t-md v-h" :class='vShow'  autocomplete="off">

                     <Form-Item label="用户组">
                         <Radio-group v-model="groupcode">
                             <Radio v-for="item in groupList" :label="item.label" :key="item.value"></Radio>
                         </Radio-group>
                         {{groupcodeStr}}
                     </Form-Item>
                     <Form-Item label="登录账号">
                         <i-Input :disabled="uid!=''" style="width: 100px;" v-model="username" placeholder="登录账号..." ></i-Input>
                     </Form-Item>
                     <Form-Item label="登录密码">
                        <i-Input  type="password" style="width: 100px;" v-model="password" placeholder="登录密码..."></i-Input>
                    </Form-Item>

                    <Form-Item label="昵称">
                        <i-input style="width: 100px;" v-model="nickname"  placeholder="昵称..."></i-input>
                    </Form-Item>

                     <Form-item label="上传头像">
                         <div class="div-user-pic">
                             <img id="headPic" style="width: 140px" :src="head_pic" onerror="this.src='{$mipInfo.domain}/assets/common/images/no-images.jpg'" />
                             <i-button v-if="head_pic != ''" class="forClose" type="success" @click="clearHeadPic"
                                       size="small" shape="circle">清除</i-button>
                         </div>
                         <Upload :accept="head_pic_accept" :format="head_pic_format"
                                 name="fileDataFileName" :max-size="head_pic_size"
                                 :headers="{'terminal':'pc','access-key':authInfo.access_key,'uid':authInfo.uid,'access-token':authInfo.access_token}"
                                 :on-success="onUploadHeadPicSuccess" :on-error="onUploadHeadPicError" :on-exceeded-size="onUploadHeadPicExceededSize"
                                 action="{$mipInfo.domain}/{$Think.config.admin}/ApiAdminUpload/defaultImgUpload">
                             <i-button type="button" icon="ios-cloud-upload-outline">上传头像图片</i-button>

                         </Upload>

                         头像图片的格式必须为{{ head_pic_format }}，文件必须小于{{ head_pic_size/1000 }}M。
                     </Form-item>

                     <Form-Item label="QQ">
                         <i-input style="width: 100px;" v-model="qq"  placeholder="QQ..."></i-input>
                     </Form-Item>
                     <Form-Item label="手机号">
                         <i-input style="width: 100px;" v-model="mobile"  placeholder="手机号..."></i-input>
                     </Form-Item>
                     <Form-Item label="Email">
                         <i-input style="width: 200px;" v-model="email"  placeholder="电子邮箱..."></i-input>
                     </Form-Item>

                    
                </i-Form>
                <Spin size="large" fix v-if="spinShow"></Spin>
                <div class="text-center">
                    <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle m-b-sm" @click='publishPost'>
                        <span><Icon type="checkmark-round"></Icon> 提交保存</span>
                    </button>
                </div>
            </section>
        </section>
    </section>
     
</main>
{/block}
    
{block name="javascript"}
<script src="https://cdn.staticfile.org/blueimp-md5/2.7.0/js/md5.min.js" type="text/javascript" charset="utf-8"></script>
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            vShow: '',
            spinShow: true,
            username: '',
            password: '',
            nickname: '',
            qq: '',
            mobile: '',
            email: '',
            uid: '{$uid==null?"":$uid}',
            groupcode: '{$groupcode}',
            groupcodeStr: '',
            groupList:[],
            head_pic_accept: 'image/jpeg,image/pjpeg,image/gif,image/png,image/bmp',
            head_pic_format: ['jpg','jpeg','gif','bmp','png'],
            head_pic_size: 1000,
            head_pic: '/assets/common/images/no-images.jpg',

            userPublishStatus: 'add',
        },
        watch: {

        },
        mounted() {

            this.getUserInfo();
            this.getgroupList();
            this.initGroup();
        },
        methods: {

            onUploadHeadPicSuccess(resp,file,files){
                this.head_pic = resp.data;
            },
            onUploadHeadPicError(resp,file,files){},
            onUploadHeadPicExceededSize(file,files){
                this.$Message.warning('头像图片不能超过'+(this.head_pic_size/1000)+'M');
            },

            clearHeadPic(){
              this.head_pic='';
            },
            initGroup() {
                if(this.groupcode ==''  || this.groupcodeStr != ''){
                    return;
                }
                var _this=this;
                this.$mip.ajax('/user/ApiAdminUserGroup/getGroupInfo',{group_code: this.groupcode})
                    .then(function (res) {
                    if(res.code == 1){
                        console.log(_this.groupcodeStr);
                        _this.groupcodeStr = res.data.name;

                    }
                })
            },
            getgroupList() {
                var _this=this;
                this.$mip.ajax('/user/ApiAdminUserGroup/getgroupList',{})
                    .then(function (res) {
                        if(res.code == 1){
                            _this.groupList = res.data;
                        }
                    })
            },
            //编辑时
            getUserInfo() {
                var _this = this;
                if(_this.uid==''){
                    _this.vShow = 'v-s';
                    _this.spinShow=false;
                    _this.userPublishStatus='add'
                    return;
                }else{
                    _this.userPublishStatus='edit';
                }

                this.$mip.ajax('{$mipInfo.domain}/user/ApiAdminUser/getUserInfo', {
                    uid: this.uid,
                }).then(function(res) {
                    if(res.code == 1) {
                        var userInfo = res.data;
                        _this.username = userInfo.username==null?'':userInfo.username;
                        _this.nickname = userInfo.nickname==null?'':userInfo.nickname;
                        _this.uid = userInfo.uid==null?'':userInfo.uid;
                        if(userInfo.head_pic!=null&&userInfo.head_pic!=''){
                            _this.head_pic = userInfo.head_pic;
                        }
                        _this.qq = userInfo.qq;
                        _this.mobile=userInfo.mobile;
                        _this.email=userInfo.email;
                        _this.groupcode=userInfo.group_code;
                        _this.groupcodeStr=userInfo.groupcodeStr;
                    }
                    _this.vShow = 'v-s';
                    _this.spinShow=false;
                });
            },
            //开始发布
            publishPost: function(param) {
                var timestamp = Date.parse(this.publish_time);
                timestamp = timestamp / 1000;

                var d1 ={
                    username: this.username,
                    password: this.password!=null&&this.password!=''?md5(this.password):'',
                    nickname: this.nickname,
                    qq: this.qq,
                    mobile: this.mobile,
                    email: this.email,
                    head_pic:this.head_pic,
                    publish_time: timestamp ? timestamp : '',
                    publishStatus: this.userPublishStatus,
                };

                if(this.userPublishStatus == 'add') {
                    d1.groupcode = this.groupcode;
                } else {
                    d1.uid = this.uid;
                }

                this.$mip.ajax('{$mipInfo.domain}/user/ApiAdminUser/userAddOrEdit', d1).then(res => {
                    if(res.code == 1) {
                        this.$Message.success(res.msg);
                    }
                    if(this.userPublishStatus == 'add') {
                        location.href='{$mipInfo.domain}/{$Think.config.admin}/user/userList/groupcode-'+this.groupcode;
                    }
                });

            },

        }
    })
  </script>
{/block}